<!-- 服务推广 -->
<template>
	<view class="page">
		<view class="box">
			<view class="group_1">
				

				<view class="group_3">
					<view class="group_2">
						<image :src="user.HeadImgUrl" mode="aspectFill"></image>
					</view>
					<text lines="1" class="text_3 hiddenText diyWidth">{{ $util.entitiesToUtf16(user.Name) }}</text>
					<view class="section_1">
						<view class="text-group_1">
							<text lines="1" class="text_4">{{ myInfo.Balance }}</text>
							<text lines="1" class="text_5">我的积分</text>
						</view>
						<view class="image_3"></view>
						<view class="text-group_1" @click="nav_to('/pages/user/te_commis')">
							<text lines="1" class="text_4">{{ amount_of_money }}</text>
							<text lines="1" class="text_5">我的收益</text>
						</view>
					</view>
					<view class="section_1">
						<view class="text-group_1" @click="nav_to(`/pages/vip/vipPayTeam?SaleMonth=${timeStr}`)">
							<text lines="1" class="text_4">{{ teamInfo.SaleTeamMoney || 0 }}</text>
							<text lines="1" class="text_5">当月业绩</text>
						</view>
						<view class="image_3"></view>
						<view class="text-group_1">
							<text lines="1" class="text_4">{{ userList.length }}</text>
							<text lines="1" class="text_5">成功邀请</text>
						</view>
					</view>
					<view class="section_2">
						<!-- #ifdef MP-WEIXIN -->
						<view class="text-wrapper_2" @click="nav_to('/pages/user/placard')">
							<text lines="1" class="text_8">专属推广码</text>
						</view>
						<view class="text-wrapper_3">
							<button lines="1" class="text_9" hover-class="none" open-type="share">邀请好友</button>
						</view>
						<!-- #endif -->

						<!-- #ifdef APP-PLUS -->
						<view class="app_text-wrapper_2" @click="nav_to('/pages/user/placard')">
							<text lines="1" class="text_8">专属推广码</text>
						</view>
						<!-- <view class="text-wrapper_3">
              <text lines="1" class="text_9" @click="shareWX">邀请好友</text>
            </view> -->
						<!-- #endif -->
					</view>
				</view>
			</view>
			
			<view class="manager" v-if="myInfo && myInfo.ParentUser">
				<view class="manager_title">
					我的上级
				</view>
				<view class="manager_cell">
					<view class="manage_box">
						<image class="headimg" :src="myInfo.ParentUser.HeadImgUrl" mode="aspectFill"></image>
						<view class="manage_means">
							<view class="manage_name">
								{{myInfo.ParentUser.Name}}
							</view>
							<view class="manage_tel">
								{{myInfo.ParentUser.Phone}}
							</view>
						</view>
						
					</view>
					<view class="manage_btn" @click="telFun(myInfo.ParentUser.Phone)">
						联系
					</view>
				</view>
			</view>
			<!-- <view style="height: 260rpx;" v-if="myInfo && myInfo.ParentUser"></view> -->
			
			<view class="group_4">
				<view>
					<view class="text-group_2">
						<text>成功邀请 ({{ userList.length || 0 }}人)</text>
					</view>
				</view>
				<scroll-view scroll-y="true" :style="{ 'max-height': screenHeight < 812 ? '20vh' : screenHeight==812 ? '28vh' : '33vh' }">
					
					<view v-if="userList.length > 0">
						<view class="block_2" v-for="item in userList" :key="item.ID" @click="nav_to(`/pages/vip/vipPay2Person?id=${item.ID}&name=${item.Name}`)">
							<view class="person_cell">
								<image :src="item.HeadImgUrl" class="label_wh" mode="aspectFill"></image>
								<view class="person_info">
									<view class="image-text_2">
										<view class="name_box">
											<view class="text-group_3">
												{{ $util.entitiesToUtf16(item.Name) }}
											</view>
											<view class="Tag" v-if="item.SaleLevel">
												{{ item.SaleLevel }}
											</view>
										</view>
									</view>
									<view class="time">{{ getTime2(item.CreateTime) }}</view>
								</view>
							</view>
						
							<view class="pay_cell">
								<view class="pay_text" v-if="item.UserSaleMoney">
									+{{item.UserSaleMoney}}
								</view>
								<!-- <view class="pay_btn" @click="openPayPopup(item)">充值</view> -->
							</view>
						</view>
					</view>
					<view class="null_box" :style="{'height' : screenHeight < 812 ? '20vh' : screenHeight==812 ? '28vh' : '33vh'}">
						暂无数据
					</view>
					
				</scroll-view>
			</view>
			<BtmLogo></BtmLogo>

			<uni-popup ref="PopupBox" type="center">
				<view class="popup_body">
					<view class="popup_title">
						会员充值
						<view class="popup_icon" @click="closePayPopup()">
							<uni-icons type="closeempty" size="18" color="#242424"></uni-icons>
						</view>
					</view>
					<view class="popup_main">
						<view class="popup_cell" :class="tabIndex == index ? 'popup_active' : ''" v-for="(item, index) in vipList" :key="index" @click="chooseThali(index)">
							<view class="shop_title">{{item.UserType}}</view>
							<view class="shop_info">
								赠送积分{{item.PValue}}
							</view>
							<view class="shop_price">¥{{item.Fee}}</view>
						</view>
					</view>

					<view class="popup_btn" @click="payFun()">充值</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: {},
			userList: [],
			amount_of_money: 0,
			screenHeight: '',
			tabIndex:-1,
			vipList:[],
			checkPerson:null,
			
			myInfo:null,
			nowtime: Number(new Date()),
			teamInfo:null,
			timeStr:''
		};
	},
	onLoad() {
		let time = this.$util.unixDatetime(this.nowtime, 'yy-mm')
		let year = time.split('-')[0]
		this.timeStr = time
		this.getPhoneInfo();
		this.user = uni.getStorageSync('user');
		this.userListFn();
		this.SaleChannel();
		this.getVipType()
		this.MySalePerformance()
	},
	methods: {
		async MySalePerformance() {
			let res = await this.$api.post('/SaleChannel/MySalePerformance',{
				SaleMonth:this.timeStr
			})
			if(res.code==0){
				this.teamInfo = res.data || null
			}else{
				this.$pv.msg(res.message)
			}
		},
		getTime2(l) {
			let d = new Date(l);
			let timestamp = d.getTime();
			return this.$util.unixDatetime(timestamp, 'yy-ss');
		},
		telFun(tel) {
			if(!tel){
				this.$pv.msg('暂无联系方式')
				return
			}
			uni.makePhoneCall({
				phoneNumber: tel.toString(),
				success() {
					console.log('拨号成功');
				},
				fail(err) {
					console.error('拨号失败:', err);
				},
			});
		},
		async getVipType(){
			let res = await this.$api.post('/Member/GetUserType')
			if(res.data){
				this.vipList = res.data.filter(item=>item.UserType!='普通用户')
			}
		},
		openPayPopup(item) {
			console.log(item);
			this.checkPerson = item
			console.log(this.checkPerson);
			this.$refs.PopupBox.open();
		},
		closePayPopup(){
			this.tabIndex = -1
			this.checkPerson = null
			this.$refs.PopupBox.close();
		},
		async payFun(){
			if(this.tabIndex==-1){
				this.$pv.msg('请先选择充值套餐')
				return
			}
			let res = await this.$api.post('/SaleChannel/Recharge',{
				UserID:this.checkPerson.ID,
				UserTypeID:this.vipList[this.tabIndex].ID // 会员等级ID
			})
			if(res.code==0){
				this.$pv.msg('充值成功')
				this.userListFn();
			}else{
				this.$pv.msg(res.message)
			}
			this.closePayPopup()
		},
		chooseThali(index){
			this.tabIndex = index
		},
		getPhoneInfo() {
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight;
				},
			});
		},
		async userListFn() {
			let res = await this.$api.post('SaleChannel/MyRecommendUsersV2');
			if (res.code == 0) {
				this.userList = res.data;
				this.userList = []
			} else {
				this.$pv.msg(res.message);
			}
		},
		async SaleChannel() {
			const user = uni.getStorageSync('user');
			let res = await this.$api.post('SaleChannel/Detail',{ID:user.UserID});
			if (res.code == 0) {
				this.amount_of_money = res.data.Commission;
				this.myInfo = res.data
			} else {
				this.$pv.msg(res.message);
			}
		},
		shareWX() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = user.UserID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/user_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				title: '【Golfdate】我喜欢在Golfdate约人组局打高尔夫，你也来报名吧',
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/user/user_visitor?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl,
				},
				success: (res) => {
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});

			// this.is_app_share_show = false;
		},
	},
};
</script>

<style lang="scss">
.page {
	background-color: rgba(246, 246, 246, 1);
	background: linear-gradient(to bottom, #ff9918, #ff4d0d);
	// position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	// display: flex;
	.box {
		// background: linear-gradient(to bottom, #ff9918, #ff4d0d);
		background-size: 100% 100%;
		// display: flex;
		// flex-direction: column;
		width: 100%;
		padding: 24rpx;
		.group_1 {
			// background: url(https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721791717045650.png) 100% no-repeat;
			background-size: 100% 100%;
			// display: flex;
			// flex-direction: column;
			// position: relative;
			// padding: 30rpx 310rpx 78rpx 312rpx;
			.group_2 {
				width: 128rpx;
				height: 128rpx;
				> image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: absolute;
				left: 50%;
				top: -64rpx;
				transform: translate(-50%,0);
				z-index: 10;
				border-radius: 50%;
				overflow: hidden;
				background-color: white;
				padding: 6rpx;
			}
			.group_3 {
				background-color: rgba(255, 255, 255, 1);
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				padding: 80rpx 60rpx 34rpx;
				position: relative;
				box-sizing: border-box;
				margin-top: 90rpx;
				.text_3 {
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-family: PingFang-SC-Bold;
					font-weight: normal;
					text-align: right;
					white-space: nowrap;
					line-height: 44rpx;
					align-self: center;
				}
				.section_1 {
					width: 100%;
					align-self: center;
					margin-top: 26rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					.text-group_1 {
						width: 49%;
						
						display: flex;
						flex-direction: column;
						align-items: center;
						.text_4 {
							overflow-wrap: break-word;
							color: rgba(51, 51, 51, 1);
							font-size: 40rpx;
							font-family: PingFang-SC-Bold;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							// line-height: 66rpx;
						}
						.text_5 {
							overflow-wrap: break-word;
							color: rgba(153, 153, 153, 1);
							font-size: 26rpx;
							font-family: PingFang-SC-Medium;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							line-height: 40rpx;
						}
					}
					.image_3 {
						width: 2rpx;
						height: 86rpx;
						margin: 12rpx 0 8rpx 0;
						background: #e4e4e4;
					}
				}
				.section_2 {
					width: 582rpx;
					margin-top: 34rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					.text-wrapper_2 {
						border-radius: 40rpx;
						border: 1px solid #5d8bf8;
						display: flex;
						flex-direction: column;
						padding: 18rpx 52rpx 18rpx 52rpx;
						.text_8 {
							overflow-wrap: break-word;
							color: #5d8bf8;
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							line-height: 40rpx;
						}
					}
					.app_text-wrapper_2 {
						margin: 0 auto;
						border-radius: 40rpx;
						border: 1px solid rgba#5d8bf8;
						display: flex;
						flex-direction: column;
						padding: 18rpx 52rpx 18rpx 52rpx;
						.text_8 {
							overflow-wrap: break-word;
							color: #5d8bf8;
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							line-height: 40rpx;
						}
					}
					.text-wrapper_3 {
						background-color: #5d8bf8;
						border-radius: 40rpx;
						display: flex;
						flex-direction: column;
						padding: 20rpx 68rpx 20rpx 68rpx;
						.text_9 {
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							line-height: 40rpx;
							&::after {
								border: none;
							}
						}
					}
				}
			}
		}
		.group_4 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			align-self: center;
			// margin-top: 320rpx;
			// width: 702rpx;
			display: flex;
			flex-direction: column;
			padding: 16rpx 24rpx 32rpx 24rpx;
			
			box-sizing: border-box;
			.text-group_2 {
				margin-bottom: 12rpx;
				display: flex;
				align-items: center;
				text{
					font-weight: bold;
					font-size: 30rpx;
					color: #111;
				}
				.text_tem {
					overflow-wrap: break-word;
					font-family: PingFang-SC-Bold;
					font-weight: normal;
					text-align: right;
					white-space: nowrap;
				}
				.text_10 {
					color: rgba#5d8bf8;
					font-size: 48rpx;
					letter-spacing: 3rpx;
					margin: 0 10rpx;
				}
				.text_11 {
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}
				.text_12 {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					letter-spacing: 2rpx;
				}
			}
			scroll-view {
				max-height: 27vh;
			}
			.block_2 {
				width: 654rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;
				.person_cell {
					display: flex;
					align-items: center;
					.label_wh {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 18rpx;
					}
					.person_info {
						.image-text_2 {
							// width: 90%;
							flex: 1;
							flex-direction: row;
							display: flex;
							// justify-content: space-between;
							align-items: center;

							.name_box {
								display: flex;
								align-items: center;
								.text-group_3 {
									max-width: 250rpx;
									overflow: hidden; /*超出部分隐藏*/
									white-space: nowrap; /*禁止换行*/
									text-overflow: ellipsis; /*省略号*/

									overflow-wrap: break-word;
									color: rgba(51, 51, 51, 1);
									font-size: 28rpx;
									letter-spacing: 2rpx;
									font-family: PingFang-SC-Bold;
									font-weight: normal;
									white-space: nowrap;
									line-height: 40rpx;
								}
								.Tag {
									width: fit-content;
									height: 44rpx;
									padding: 0 12rpx;
									background: linear-gradient(90deg, rgba(250, 113, 52, 0.05) 0%, rgba(253, 151, 74, 0.21) 100%);
									border-radius: 24rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 24rpx;
									color: #ff5a0f;
									margin-left: 12rpx;
								}
							}
						}
						.time {
							margin-top: 8rpx;
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.pay_cell {
					margin-left: 12rpx;
					display: flex;
					align-items: center;
					.pay_btn {
						background-color: #5d8bf8;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #fff;
						padding: 8rpx 14rpx;
					}
					.pay_text{
						color: #5d8bf8;
						font-size: 28rpx;
					}
				}

				.text_15 {
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					font-family: PingFang-SC-Medium;
					font-weight: normal;
					text-align: right;
					white-space: nowrap;
					line-height: 34rpx;
					margin-top: 22rpx;
				}
			}
			.block_2:last-child {
				margin-bottom: 0;
			}
			
			.null_box{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #999;
			}
		}
	}
}

.popup_body {
	width: 80vw;
	border-radius: 16rpx;
	background-color: #f6f6f6;
	box-sizing: border-box;
	padding: 24rpx 32rpx;
	position: relative;
	.popup_title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		color: #111;
		margin-bottom: 14rpx;
		.popup_icon {
			position: absolute;
			top: 0;
			right: 0;
			padding: 12rpx;
		}
	}
	.popup_main {
		.popup_cell {
			border-radius: 16rpx;
			background: linear-gradient(134deg, #fef9ef 0%, #fff4e3 100%);
			border: 4rpx solid #ffe4c3;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.shop_title {
				font-size: 28rpx;
				color: #111;
				font-weight: bold;
				margin-bottom: 6rpx;
			}
			.shop_info {
				font-size: 26rpx;
				color: #c2875b;
			}
			.shop_price {
				color: #ff4d0d;
				font-size: 32rpx;
				margin-top: 12rpx;
			}
		}
		.popup_active {
			background: linear-gradient(134deg, #fff6f6 0%, #ffe7e7 100%);
			border: 4rpx solid #ff7f7e;
		}
	}
	.popup_btn {
		background-color: #5d8bf8;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		width: 250rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 32rpx auto 0;
	}
}

.manager{
	background-color: white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin: 16rpx 0;
	
	box-sizing: border-box;
	.manager_title{
		font-weight: bold;
		font-size: 30rpx;
		color: #111;
		margin-bottom: 12rpx;
	}
	.manager_cell{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.manage_box{
			flex: 1;
			display: flex;
			align-items: center;
			.headimg{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 18rpx;
			}
			.manage_means{
				.manage_name{
					max-width: 250rpx;
					overflow: hidden; /*超出部分隐藏*/
					white-space: nowrap; /*禁止换行*/
					text-overflow: ellipsis; /*省略号*/
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					letter-spacing: 2rpx;
					font-family: PingFang-SC-Bold;
					font-weight: normal;
					white-space: nowrap;
				}
				.manage_tel{
					margin-top: 6rpx;
					font-size: 26rpx;
					color: #5d8bf8;
				}
			}
			
		}
		.manage_btn{
			background-color: #5d8bf8;
			border-radius: 16rpx;
			font-size: 26rpx;
			color: #fff;
			width: 100rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
